<template>
	<view class="discuss-list">
		<view class="labdel">讨论（{{total}}条）</view>
		<view class="send">
			<image class="send-img" :src="userData.avatarUrl"></image>
			<view class="send-content" @click="focus=true">我来说几句</view>
		</view>
		<view class="send-box" :style="{bottom:`${keyboardHeight}px`}">
			<input class="send-box-content" type="text"
			@focus = "getFocus"
			@blur="blur"
			 confirm-type="send"  v-model.trim='myContent' placeholder="评论" :focus="focus"/>
			 <button @mousedown.prevent="" @click="sendComment"  class="send-box-btn"
			 :class="myContent.length==0?'send-box-btn-grey':'send-box-btn-active'">发送</button>
		</view>
		<view v-if='discussList.length>0'>
		<view  class="discuss-item" v-for="(item,index) in discussList" :key="item.discussDetailId">
			<image class="item-img" :src="item.avator==undefined?'/static/img/qq.png':item.avator"></image>
			<view class="item-right">
				<view class="username">{{item.userName}}</view>
				<view class="item-content">{{item.content}}</view>
				<view class="time-num">
					<view>{{item.createTime}}</view>
					<view class="time-num-right">
						<image class="num-img" src="/static/course/discuss_icon3.png"></image>
						<view>{{replyLength(item.reply)}}</view>
					</view>
				</view>
				<!-- 回复 -->
				<view class="reply" v-for="(replyItem,replyIndex) in item.reply" :key="replyIndex">
					<view>
						<text class="reply-name">{{replyItem.userName}}回复：</text>
						{{replyItem.content}}
					</view>
					<view class="reply-time">{{replyItem.createTime}}</view>
				</view>
			</view>
		</view>
		
		</view>
		<view class="empty" v-else>
			<image class="empty-img" src='/static/course/discuss_empty.png'></image>
			<view class="empty-txt">暂无讨论内容</view>
		</view>
	</view>

</template>

<script>
	import {mapState} from 'vuex'
	import {isEmpty} from '@/utils/index.js'
	import CourseService from '@/services/course.js'
	const courseService = new CourseService()
	export default {
		props: {
			total: '',
			discussId: '',
			discussList: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				myContent: '',
				focus:false,
				keyboardHeight:-200
			}
		},
		computed:{
			...mapState('user',['userData'])
		},
		methods: {
			changeFocus(){
				this.focus = true
			},
			//获取焦点
			getFocus(e){
				this.keyboardHeight = 0
			},
			blur(){
				this.focus = false;
				uni.hideKeyboard();
				this.keyboardHeight=-200
			},
			replyLength(reply){
				return isEmpty(reply)?0:reply.length
			},
			sendComment(){
				if(isEmpty(this.myContent)){
					return;
				}
				const params = {
					discussId:this.discussId,
					content:this.myContent
				}
				courseService.publishDiscuss(params).then(res=>{
					if(res.success){
						this.focus = false;
						this.keyboardHeight = -200;
						this.myContent = ""
						this.$emit('refresh')
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.discuss-list {
		font-size: 34upx;
		color: #333333;
		padding: 50upx 20upx;
		//margin-top: 20upx;
		background-color: #FFFFFF;
		line-height: 1;
	}

	.labdel {
		font-weight: bold;
	}

	.send {
		display: flex;
		margin-top: 38upx;
		padding-bottom: 40upx;
		align-items: center;
		border-bottom: 2upx solid #dddddd;

		&-img {
			width: 68upx;
			height: 68upx;
			border-radius: 50%;
		}

		&-content {
			flex: 1;
			font-size: 26upx;
			color: #999999;
			background-color: #F1F1F1;
			border-radius: 8upx;
			margin-left: 18upx;
			line-height: 80upx;
			padding: 0 10upx;
			height: 80upx;
		}
	}

	.discuss-item {
		display: flex;
		padding: 40upx 0;
		border-bottom: 2upx solid #dddddd;
	}
	.username {
		color: #4c4c4c;
		font-size: 28upx;
	}
	.item {
		&-img {
			width: 68upx;
			height: 68upx;
			margin-right: 20upx;
		}

		&-right {
			font-size: 24upx;
			color: #999999;
			flex: 1;
		}
		
		&-content {
			margin: 18upx 0 20upx;
			color: #4c4c4c;
			font-size: 32upx;
		}
	}

	.time-num {
		display: flex;
		justify-content: space-between;
		&-right{
			display: flex;
			align-items: center;
		}
	}

	.num-img {
		width: 26upx;
		height: 26upx;
		margin-right: 14upx;
	}

	.reply {
		padding: 40upx 22upx;
		margin-top: 40upx;
		background-color: #f1f1f1;
		border-radius: 8upx;
		font-size: 24upx;
		color: #333333;

		&-name {
			color: #4a96f2;
		}

		&-time {
			color: #999999;
			text-align: right;
			margin-top: 38upx;
		}
	}
	.empty{
		text-align: center;
		font-size: 28upx;
		color: #1b1b1b;
		&-img{
			width: 400upx;
			height: 228upx;
			margin-top: 80upx;
		}
		&-txt{
			margin-top: 32upx;
			opacity: 0.5;
		}
	}
	.send-box{
		position: fixed;
		left: 0;
		right: 0;
		padding: 20upx 20upx;
		display: flex;
		background-color: #F1F1F1;
		z-index: 99;
		&-content{
			flex: 1;
			font-size: 26upx;
			color: #999999;
			background-color: #FFFFFF;
			border-radius: 8upx;
			margin-left: 18upx;
			line-height: 80upx;
			padding: 0 10upx;
			height: 80upx;
		}
		&-btn{
			font-size: 28upx;
			color: #666666;
			border-radius: 8upx;
			margin-left: 20upx;
			&-grey{
				border: 2upx solid #ededed;
			}
			&-active{
				background-color: #4a96f2;
				color: #FFFFFF;
			}
		}
	}
</style>
